import React, { useEffect, useState } from 'react';
import { useCurrentFrame } from 'remotion';
import customFont from '../assets/font/YouSheBiaoTiHei.ttf';

interface VideoSplitTextProps {
  splitTexts: string[];
  highlightTexts?: string[];
  style?: React.CSSProperties;
  fontSize?: number;
}

const VideoSplitText: React.FC<VideoSplitTextProps> = ({
  splitTexts,
  highlightTexts = [],
  style,
  fontSize = 60,
}) => {
  const [fontLoaded, setFontLoaded] = useState(false);
  const frame = useCurrentFrame();
  // 每个文字显示需要的帧数 (假设视频是30fps，1100ms ≈ 33帧)
  const FRAMES_PER_TEXT = 33;

  // 根据当前帧计算应该显示多少个文字
  const visibleCount = Math.floor(frame / FRAMES_PER_TEXT);

  useEffect(() => {
    const font = new FontFace('YouSheBiaoTiHei', `url(${customFont})`);
    font
      .load()
      .then((loadedFont) => {
        document.fonts.add(loadedFont);
        setFontLoaded(true);
      })
      .catch((error) => {
        console.error('Font loading failed:', error);
        setFontLoaded(true);
      });
  }, []);

  const shouldHighlight = (text: string) => {
    return highlightTexts.some((highlight) => text.includes(highlight));
  };

  const getHighlightedText = (text: string) => {
    let result = text;
    highlightTexts.forEach((highlight) => {
      if (text.includes(highlight)) {
        const regex = new RegExp(highlight, 'g');
        result = result.replace(
          regex,
          `<span class="highlight">${highlight}</span>`,
        );
      }
    });
    return result;
  };

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '10px',
        visibility: fontLoaded ? 'visible' : 'hidden',
        padding: '20px 0',
        ...style,
      }}
    >
      {splitTexts.map((text, index) => (
        <div
          key={index}
          style={{
            position: 'relative',
            color: '#FFFFFF',
            fontFamily: fontLoaded ? 'YouSheBiaoTiHei' : 'Arial',
            fontSize: `${fontSize}px`,
            textShadow: '0 0 10px rgba(75, 123, 229, 0.8)',
            WebkitTextStroke: '2px #4B7BE5',
            fontWeight: shouldHighlight(text) ? 'bold' : 'normal',
            opacity: index <= visibleCount ? 1 : 0,
            transform: `translateY(${index <= visibleCount ? 0 : 20}px)`,
            transition: 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out',
            pointerEvents: 'none',
            willChange: 'opacity, transform',
            letterSpacing: '2px',
          }}
          dangerouslySetInnerHTML={{
            __html: getHighlightedText(text),
          }}
        />
      ))}
      <style>
        {`
          .highlight {
            color: #FDD835 !important;
            text-shadow: 0 0 10px rgba(75, 123, 229, 0.8),
                        0 0 20px rgba(75, 123, 229, 0.5);
            -webkit-text-stroke: 2px #4B7BE5;
            display: inline-block;
            letter-spacing: 2px;
          }
        `}
      </style>
    </div>
  );
};

export default VideoSplitText;
